<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>

		<!-- 订单列表部分 -->
		<h2 style="margin-top: 12vw;padding: 4vw">我发送的订单：</h2>
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in orderArr" v-show="item.orderState==0">
				<div class="order-info">
					<p>
						{{item.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
						<div class="order-info-right-icon" @click="toPayment(item.orderId)">去支付</div>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="odItem in item.list">
						<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
						<p>&#165;{{(odItem.foodPrice*odItem.quantity).toFixed(2)}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.deliveryPrice}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h3>已支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in orderArr" v-show="item.orderState==1">
				<div class="order-info">
					<p>
						{{item.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}{{item.less}}</p>
						<div class="order-info-right-icon" @click="toReceive(item.orderId)">确认收货</div>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="odItem in item.list">
						<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
						<p>&#165;{{(odItem.foodPrice*odItem.quantity).toFixed(2)}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.deliveryPrice}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h3>已完成订单信息：</h3>
		<ul class="order">
			<li v-for="item in orderArr" v-show="item.orderState==2">
				<div class="order-info">
					<p>
						{{item.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}{{item.less}}</p>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="odItem in item.list">
						<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
						<p>&#165;{{(odItem.foodPrice*odItem.quantity).toFixed(2)}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.deliveryPrice}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h2 style="padding: 4vw">我收到的订单：</h2>
		<ul class="order">
			<li v-for="item in businessArr">

				<div class="order-info">
					<p>
						{{item.businessName}}
						<i class="fa fa-caret-down" @click="ordersShow(item)"></i>
					</p>
				</div>
				<ul v-show="item.isShowDetailet">
					<li v-for="odItem in orderArrRecv" v-show="odItem.orderState==1">
						<div class="order-info">
							<p>
								{{odItem.address}} {{odItem.contactTel}}
								{{odItem.contactName}}{{sexFilter(odItem.contactSex)}}
								<i class="fa fa-caret-down" @click="detailetShow(odItem)"></i>
							</p>
							<div class="order-info-right">
								<p>&#165;{{odItem.orderTotal}}{{item.less}}</p>
							</div>
						</div>
						<ul class="order-detailet" v-show="odItem.isShowDetailet">
							<li v-for="oditems in odItem.list">
								<p>{{oditems.foodName}} x {{oditems.quantity}}</p>
								<p>&#165;{{(oditems.foodPrice*oditems.quantity).toFixed(2)}}</p>
							</li>
							<li>
								<p>配送费</p>
								<p>&#165;{{odItem.deliveryPrice}}</p>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<p style="margin-top: 10vw;">------------------------------------------------------</p>

		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import Footer from '../components/Footer.vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import axios from 'axios';
	import qs from 'qs';

	const {
		proxy
	} = getCurrentInstance();
	const user = ref({});
	const orderArr = ref([]);
	const businessArr = ref([]);
	const orderArrRecv = ref([]);

	onMounted(async () => {
		user.value = proxy.$getSessionStorage('user');
		const response = await axios.get(`CreditController/listAllUsedRedPackets/${user.value.userId}`);
		const redPacketMap = {};
		response.data.forEach(redpacket => {
			redPacketMap[redpacket.orderId] = redpacket.amount;
		});
		axios.post('OrdersController/listOrdersByUserId', qs.stringify({
			userId: user.value.userId
		})).then(response => {
			let result = response.data;
			result.forEach(orders => {
				orders.isShowDetailet = false;
				if (orders.orderId in redPacketMap)
					orders.less = "-" + redPacketMap[orders.orderId];
				else
					orders.less = "";
			});
			orderArr.value = result;
		}).catch(error => {
			console.error(error);
		});

		axios.post('BusinessController/listBusinessByManagerId', qs.stringify({
			manager: user.value.userId
		})).then(response => {
			let result = response.data;
			result.forEach(orders => {
				orders.isShowDetailet = false;
			});
			businessArr.value = result;
		}).catch(error => {
			console.error(error);
		});
	});
	const sexFilter = (value) => {
		return value === 1 ? '先生' : '女士';
	};

	const tonum = (val) => {
		let s = 0;
		s += val;
		return s.toFixed(2);
	};

	const detailetShow = (orders) => {
		orders.isShowDetailet = !orders.isShowDetailet;
	};

	const ordersShow = (business) => {
		business.isShowDetailet = !business.isShowDetailet;
		axios.post('OrdersController/listOrdersByBusinessId', qs.stringify({
			businessId: business.businessId
		})).then(response => {
			let result = response.data;
			result.forEach(orders => {
				orders.isShowDetailet = false;
			});
			orderArrRecv.value = result;
		}).catch(error => {
			console.error(error);
		});
	};

	const router = useRouter();
	const toPayment = (orderId) => {
		router.push({
			path: '/payment',
			query: {
				orderId
			}
		});
	};
	const toReceive = async (orderId) => {
		await axios.get(`WalletController/confirmReceipt/${orderId}`).then(response => {
			if (response.data == 1) {
				alert("订单完成");
				window.location.reload();
			} else {
				alert("确认收货失败");
			}
		}).catch(error => {
			console.error(error);
		});

	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order {
		width: 100%;
	}

	.wrapper .order li {
		width: 100%;
	}

	.wrapper .order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order li .order-info .order-info-right {
		display: flex;
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .order li .order-detailet {
		width: 100%;
	}

	.wrapper .order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>